<template>
  <div class="ChartMain">
    <div class="bodyCardChart">
      <div :id="id" :class="className" :style="{height:height,width:width}" />
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    id: {
      type: String,
      default: 'line'
    },
    width: {
      type: String,
      default: '200px'
    },
    height: {
      type: String,
      default: '200px'
    },
    chartOption: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    chartOption: {
      deep: true,
      handler(data) {
        this.chart.setOption(data, true)
      }
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id))
      this.chart.setOption(this.chartOption)
    }
  }
}
</script>

<style scoped>
  .ChartMain {
    height: 100%;
  }

  .bodyCardChart {
    position: relative;
    width: 100%;
    height: 100%;
  }
</style>
